<template>
<div>
			<!-- 头部 -->
		<div class="m-b-20 ovf-hd">
			<!-- 页面跳转 -->
			<div class="fl">
        <el-button type="primary" icon="document" @click="AddItems" >新增</el-button>
			</div>
			<!-- 导出Excel表格 -->
			<downExcel :baseApi="config.baseApi" :config="config.excel" :tableData="data.received.table" :conditions="data.exchanged.search"></downExcel>
			<div>
				<!-- 搜索 -->
				<search-model :config="config.search" :data="data"></search-model>
			</div>
		</div>
		<!-- 头部 -->

		<!-- 内容 -->
		<!-- <transition name="fade" mode="out-in" appear>
			<table-model v-loading="showLoading" :Edit="Edit" :tableData="data.received.table" :config="config.table" :exchanged="data.exchanged" :baseApi="config.baseApi"></table-model>
    </transition> -->
		<!-- 内容 -->

    <el-tree
      :data="data.received.table"
      :props="data.received.defaultProps"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      :render-content="renderContent">
    </el-tree>

		<!-- 底部 -->
		<div class="pos-rel p-t-20">
			<!-- 批量操作 -->
			<btnGroup  v-if="!config.table.noGroup"  :selectedData="data.exchanged.multipleSelection" :baseApi="config.baseApi" :config="config.btnGroup" :exchanged="data.exchange"></btnGroup>
			<!-- 翻页操作 -->
			<page-model :data="data" :config="config.page" :dataCount="data.received.count" :limit="data.exchanged.search.limit" :currentPage="data.exchanged.search.page"></page-model>
		</div>
		 <!--底部 -->
        <!-- 新增 -->
    <el-dialog :title="Add.config.title" :visible.sync="Add.dialogFormVisible">
      <el-form ref="form" :model="Add.data.form" :rules="Add.config.rules" label-width="130px">
				
        <!-- 普通输入类型 -->
        <el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.input">
          <el-input v-model.trim="Add.data.form[item.prop]" class="h-40 w-200" :maxlength="255" ></el-input>
        </el-form-item>

        <el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.select">
          <el-select filterable v-model="Add.data.form[item.prop]" :placeholder="item.placeholder" class="w-200">
            <el-option v-for="option in Add.data.selectData[item.prop]" :label="option.label" :value="option.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.multipleSelect">
          <el-select filterable v-model="Add.data.form[item.prop]" :placeholder="item.placeholder" class="w-200" multiple>
            <el-option v-for="option in Add.data.selectData[item.prop]" :label="option.label" :value="option.value"></el-option>
          </el-select>
        </el-form-item>

        <!-- 图片上传 -->
        <el-form-item :label="this.Add.config.form.uploadImg.label" v-if="this.Add.config.form.uploadImg.label">
          <el-upload
          class="avatar-uploader"
          :action = "Add.config.uploadUrl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="Add.data.form[this.Add.config.form.uploadImg.prop]" :src="Add.config.domain + Add.data.form[this.Add.config.form.uploadImg.prop]" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

			</el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="Add.dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="commitAdd">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新增 -->

<!-- 编辑 -->
<el-dialog
  title="提示"
  :visible.sync="Edit.dialogFormVisible"
  width="30%"
  :before-close="handleClose">
  <el-form :model="form">
    <el-form-item label="类别名称">
      <el-input v-model="Edit.data.form.CategoryName" auto-complete="off"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="Edit.dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="Edit.dialogFormVisible = false">确 定</el-button>
  </span>
</el-dialog>
<!-- 编辑 -->

</div>
</template>

<script>
import http from 'assets/js/http.js'
import btnGroup from 'components/Common/btn-group.vue'
import downExcel from 'components/Common/down-excel.vue'
import tableModel from 'components/Common/table-modelUp.vue'
import searchModel from 'components/Common/search-model.vue'
import pageModel from 'components/Common/page-model.vue'

let id = 1000

export default {
  components: {
    btnGroup,
    downExcel,
    tableModel,
    searchModel,
    pageModel
  },
  data() {
    return {
      Add: {
        dialogFormVisible: false,
        data: {
          primary: '',
          form: { CategoryName: null, Icon: null, BigImageUrl: null },
          selectData: []
        },
        config: {
          uploadUrl: axios.defaults.baseURL + 'admin/upload',
          domain: axios.defaults.baseURL,
          title: '新增1',
          form: {
            input: [
              { prop: 'CategoryName', label: '类别名称' },
              { prop: 'Icon', label: '类别icon' }
            ],
            select: [],
            uploadImg: { prop: 'BigImageUrl', label: '类别图标 (图片)' }
          },
          rules: {
            CategoryName: [{ required: true, message: '请输入类别名称' }],
            Icon: [{ required: true, message: '请输入类别icon' }],
            BigImageUrl: [{ required: true, message: '请输入类别图标 (图片)' }]
          }
        }
      },
      Edit: {
        dialogFormVisible: false,
        data: {
          primary: '',
          form: { CategoryName: null, Icon: null, BigImageUrl: null },
          selectData: []
        },
        config: {
          uploadUrl: axios.defaults.baseURL + 'admin/upload',
          domain: axios.defaults.baseURL,
          title: '编辑1',
          form: {
            input: [
              { prop: 'CategoryName', label: '类别名称' },
              { prop: 'Icon', label: '类别icon' }
            ],
            select: [],
            uploadImg: { prop: 'BigImageUrl', label: '类别图标 (图片)' }
          },
          rules: {
            CategoryName: [{ required: true, message: '请输入类别名称' }],
            Icon: [{ required: true, message: '请输入类别icon' }],
            BigImageUrl: [{ required: true, message: '请输入类别图标 (图片)' }]
          }
        }
      },
      config: {
        baseApi: 'Categories/treeData',
        excel: {
          fileName: '分类列表',
          tHeader: ['类别名称', '类别icon', '类别图标 (图片)'],
          filterVal: ['CategoryName', 'Icon', 'BigImageUrl']
        },
        table: {
          noGroup: true,
          checkbox: false,
          status: false,
          sort: { field: 'custom' },
          show: {
            items: ['类别名称', '类别icon', '类别图标 (图片)'],
            prop: ['CategoryName', 'Icon', 'BigImageUrl'],
            width: [200, 200, 200, 200]
          },
          operate: { del: true, edit: true }
        },
        search: {
          search_input: [{ name: 'CategoryName', placeholder: '类别名称' }],
          search_select: []
        },
        page: {
          limits: [5, 10, 20, 50, 100],
          layout: 'total, sizes, prev, pager, next, jumper'
        }
      },
      data: {
        received: {
          defaultProps: {
            children: 'children',
            label: 'label'
          },
          table: [],
          count: null,
          search: {
            status: [
              { label: '启用', value: '1' },
              { label: '禁用', value: '0' }
            ]
          }
        },
        exchanged: {
          search: { limit: 5, page: 1, orderByString: '' },
          multipleSelection: [],
          isDelete: 0
        }
      }
    }
  },
  created() {
    this.init()
    // 延迟绑定监听
    this.$watch('data.exchanged.search', {
      deep: true,
      handler: function() {
        router.push({ path: this.$route.path, query: this.getCondition() })
        _g.openGlobalLoading()
        this.tableData()
      }
    })
    this.$watch('data.exchanged.isDelete', {
      deep: true,
      handler: function() {
        _g.openGlobalLoading()
        this.tableData()
      }
    })
  },
  methods: {
    init() {
      // 基本数据获取
      this.tableData()
      this.getSelect()
    },
    AddItems() {
      this.Add.dialogFormVisible = true // 显示窗体
    },
    getSelect() {
      // let url = 'blog/ArticleTypes'
      // this.apiGet(url).then(res => {
      //   this.handelResponse(res, data => {
      //     data.list.map(function(i) {
      //       i.value = i.id
      //       i.label = i.typeName
      //     })
      //     console.log('data.list', data.list)
      //     this.Edit.data.selectData.type = data.list
      //     this.Add.data.selectData.type = data.list
      //   })
      // })
    },
    tableData() {
      // 表格数据
      const data = {
        params: this.getCondition()
      }
      // 请求地址
      let url = this.config.baseApi
      this.apiGet(url, data).then(res => {
        this.handelResponse(res, data => {
          data.map(function(i) {
            i.label = i.CategoryName
          })
          this.data.received.table = data
          _g.closeGlobalLoading()
        })
      })
    },
    getCondition() {
      // 搜索优化配置
      let temp = this.data.exchanged.search
      let params = {}
      for (let key in temp) {
        if (temp[key]) {
          params[key] = temp[key]
        }
      }
      return params
    },
    commitAdd() {
      console.log(this.Add.data.form)
      this.$refs.form.validate(pass => {
        if (pass) {
          // 提交数据
          const url = 'client/Categories'
          this.apiPost(url, this.Add.data.form).then(res => {
            this.handelResponse(
              res,
              data => {
                _g.toastMsg('success', res.data)
                this.data.exchanged.isDelete++
                this.Add.dialogFormVisible = false // 显示窗体
              },
              () => {
                this.isLoading = !this.isLoading
              }
            )
          })
        }
      })
    },
    handleAvatarSuccess(res, file) {
      this.Add.data.form[this.Add.config.form.uploadImg.prop] = res.data
      // this.imageUrl =
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    append(data) {
      const newChild = { id: id++, label: 'testtest', children: [] }
      if (!data.children) {
        this.$set(data, 'children', [])
      }
      data.children.push(newChild)
    },
    remove(node, data) {
      console.log(data)

      this.$confirm('此操作将永久删除该类别, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const url = 'client/Categories'
        // 提交数据
        this.apiDelete(url + '/', data.Id)
          .then(res => {
            this.handelResponse(
              res,
              data => {
                _g.toastMsg('success', data)
                const parent = node.parent
                const children = parent.data.children || parent.data
                const index = children.findIndex(d => d.id === data.id)
                children.splice(index, 1)
              },
              () => {
                this.isLoading = !this.isLoading
              }
            )
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      })
    },
    edit(data) {
      // 编辑节点
      console.log(data)
      this.Edit.data.form = data
      this.Edit.dialogFormVisible = true
    },
    renderContent(h, { node, data, store }) {
      // <el-button
      //   style='font-size: 12px;'
      //   type='text'
      //   on-click={() => this.append(data)}
      // >
      //   添加子节点
      // </el-button>
      return (
        <span style='flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;'>
          <span>
            <span>{node.label}</span>
          </span>
          <span>
              <el-button
              style='font-size: 12px;'
              type='text'
              on-click={() => this.edit(data)}>
              <i class='el-icon-edit'></i>
            </el-button>
            <el-button
              style='font-size: 12px;'
              type='text'
              on-click={() => this.remove(node, data)}
            >
              <i class='el-icon-delete'></i>
            </el-button>
          </span>
        </span>
      )
    }
  },
  mixins: [http]
}
</script>

<style scoped>
.el-input,
.el-input__inner {
  width: auto;
}
</style>
